<template>
  <div class="myhome">
      
      <!-- 内容 -->
      <div class="my">
          <!-- 用户资料 -->
          <div class="userdata">
              <div class="userdata_img" @click="goto('personal',loginaccount.userid)">
                  <img :src="loginaccount.portrait" alt="" v-if="loginaccount.portrait==''">
                  <img src="@/assets/logo.png" alt="" v-else>
              </div>
              <div class="userdata_info" @click="goto('personal',loginaccount.userid)">
                  <div class="user_info_name" v-if="loginaccount==null">登录</div>
                  <div class="user_info_name" v-if="loginaccount.registertel!=''&&loginaccount.nickname==''">{{loginaccount.registertel}}</div>
                  <div class="user_info_name" v-if="loginaccount.registertel!=''&&loginaccount.nickname!=''">{{loginaccount.nickname}}</div>                  

                  <div class="user_info_msg" >
                      个人资料 >
                  </div>
              </div>
              <!-- 设置 -->
              <div class="setup" @click="goto('setup')">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shezhi"></use>
                  </svg>
              </div>
              <!-- 客服 -->
              <div class="customerservice">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-kefunv"></use>
                  </svg>
              </div>
          </div>
          <!-- 资产 -->
          <div class="assets">
              <div class="moneycart">
                  <div class="assetsvalue">
                      资产总额
                      <svg class="icon" aria-hidden="true" @click="ismoneystar()">
                        <use xlink:href="#icon-yanjing-bi" v-if="!moneystar"></use>
                        <use xlink:href="#icon-yanjing-zheng" v-if="moneystar"></use>
                      </svg>
                      
                  </div>
                  <div class="assetsnumber">
                      <span v-if="!moneystar">{{Number(loginaccount.balance).toFixed(2)}}</span>
                      <span v-if="moneystar">····</span>
                  </div>
                  <div class="seedetails" @click="goto('capital')">
                      查看详情 >
                  </div>
                  <div class="bai left"></div>
                  <div class="bai right"></div>
              </div>
          </div>
          <!-- 可用余额 -->
          <div class="available">
              <div class="balance">
                  <div>可用余额</div>
                  <div>{{Number(loginaccount.balance).toFixed(2)}}</div>
              </div>
              <div class="withdrawals">
                  <div>提现</div>
              </div>
              <div class="recharge">
                  <div>充值</div>
              </div>
          </div>
          <!-- 功能1 -->
          <div class="use1">
              <div class="use1_item" @click="goto('tender')">
                  <div> <span></span> 散标（0）</div>
                  <div>代收：0</div>
              </div>
              <div class="use1_item" @click="goto('integral')">
                  <div> <span></span> 积分</div>
                  <div>0 积分记录</div>
              </div>
          </div>
          <!-- 功能2 -->
          <div class="use2">
              <div class="use2_list">
                  <div class="use2_item" @click="goto('winning')">
                      <div> <span></span> 中奖纪录</div>
                      <div>我的中奖纪录</div>
                  </div>
                  <div class="use2_item" @click="goto('discount')">
                      <div> <span></span> 我的荷包</div>
                      <div>红包、加息卷等</div>
                  </div>
              </div>
              <div class="use2_list">
                  <div class="use2_item" @click="goto('member ')">
                      <div> <span></span> 我的会员</div>
                      <div>会员特权、商城</div>
                  </div>
                  <div class="use2_item" @click="goto('invitation ')">
                      <div> <span></span> 我的邀请</div>
                      <div>查看佣金收益</div>
                  </div>
              </div>
          </div>
          <!-- 客服热线 -->
          <div class="customer">
              <p>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-msnui-telephone"></use>
                </svg>
                客服热线：400-1191-199
              </p>
          </div>
      </div>

      <!-- 遮罩层 -->
      <div class="mask" v-if="!show">
          <div class="loginto">
              <button class="btn" @click="goto('login')">登录/注册</button>
          </div>
      </div>
      
  </div>
</template>

<script>
export default {
    data(){
        return {
            // 是否显示遮罩层
            show:false,
            // 资产是否显示
            moneystar:false,
            // 当前登陆账户的id
            loginaccount:{balance:0,nickname:"登录"}
        }
    },
    created(){
        // 判断是否登录
        this.islogin()
        // 获取数据
        this.getuserinfo()
    },
    updated(){
        // 判断是否登录        
        this.islogin()
    },
    methods:{
        // 获取数据
        getuserinfo(){
            var id = sessionStorage.getItem('id')
            this.$http.get("../../static/json/user.json").then((res)=>{
                var userinfo = res.data.userinfo
                for(var i=0;i<userinfo.length;i++){
                    if(userinfo[i].userid==id){
                        this.loginaccount = userinfo[i]
                    }
                }
            })
        },
        // 是否已登录
        islogin(){
            // 判断是否登录账号
            var id = sessionStorage.getItem("id")
            if(id==null){
                this.show=false
            }else{
                this.show=true
            }
        },
        // 资产是否显示
        ismoneystar(){
            if(this.moneystar){
                this.moneystar=false
            }else{
                this.moneystar = true
            }
        },
        //跳转
        goto(val,id){
            // console.log(val)
            if(id==""){
                this.$router.push({path:"/"+val})
            }else{
                this.$router.push({path:"/"+val,query:{id:id}})
            }
            
        }
    }
}
</script>

<style scoped>
    .myhome{
        flex: 1;
        overflow-y: auto;
        position: relative;
        display: flex;
    }


    /* 内容 */
    .my{
        flex: 1;
        overflow-y: auto;
        background: #f4f4f4;
    }
    /* 用户资料 */
    .userdata{
        display: flex;
        flex-direction: row;
        background: #fff;
        padding: 0.2rem 0;
    }
    .userdata_img img{
        display: block;
        width: .63rem;
        height: .63rem;
        border-radius: 50%;
        margin: 0 0.2rem;
    }
    .userdata_info{
        flex: 1;
        display: flex;
        flex-direction: column;
        font-size: .13rem;
        
    }
    .userdata_info>div{
        flex: 1;
        padding: 0.085rem 0;
    }

    .setup,.customerservice{
        line-height: .6rem;
        padding: 0 .1rem;
    }
    .userdata .icon{
        font-size: .2rem;
    }
    
    /* 资产 */
    .assets{
        display: flex;
        padding: 0 .31rem ;
        background: #Fff;
        margin-bottom: 
        
    }
    .assets .icon{
        fill: #fff;
    }
    .moneycart{
        flex: 1;
        background: #ff8b38;
        display: flex;
        flex-direction: column;
        border-radius: 0.05rem;
        text-align: center;
        color: #fff;
        font-size: .18rem;
        padding: .25rem 0;
        position: relative;
    }
    .assetsnumber{
        padding: .1rem 0;
        font-size: .2rem;
    }
    .bai{
        position: absolute;
        top: 50%;
        margin-top: -0.15rem;
        background: #fff;
        width: .3rem;
        height: .3rem;
        border-radius: 50%;
    }
    .bai.left{
        left: 0;
        margin-left: -0.15rem;
    }
    .bai.right{
        right: 0;
        margin-right: -0.15rem;
    }

    /* 可用余额 */
    .available{
        display: flex;
        flex-direction: row;
        background: #fff;
    }
    .balance{
        flex: 1;
        display: flex;
        flex-direction: column;
        font-size: .15rem; 
        padding: 0 0.22rem;
        display: flex;
        flex-direction: column;
    }
    .balance div{
        flex: 1;
        padding: 0.15rem 0;
    }
    .recharge,.withdrawals{
        font-size: .15rem;
        vertical-align: middle;
        padding: 0.27rem 0;
    }
    .recharge{
        color: #fff;
    }
    .recharge div{
        background: #fb8a42;
    }
    .withdrawals{
        color: #fb8a42;
    }
    .withdrawals div,.recharge div{
        display: block;
        padding: 0.07rem .14rem;
        border:0.03rem solid #fb8a42;
        border-radius:.15rem;
        margin-right:.2rem;
    }

    /* 功能区1 */
    .use1{
        background: #fff;
        display: flex;
        flex-direction: row;
        padding: .2rem 0;
        border-top: solid 1px #efefef;
    }
    .use1_item{
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 .22rem;
        font-size: .16rem;
    }
    .use1_item:nth-child(1){
        border-right: solid 1px #efefef;
    }
    .use1_item>div{
        flex: 1;
        height: .2rem;
        line-height: .2rem;
    }
    .use1_item>div span{
        display: inline-block;
        width: .2rem;
        height:100%;
        background: #ff8b38;
        border-radius: 0.05rem;
    }
    .use1_item>div:nth-child(2){
        color: #8e8e8e;
        margin-top: 0.15rem;
    }
    
    /* 功能区块2 */
    .use2{
        background: #fff;
        display: flex;
        flex-direction: column;
        margin-top: .2rem;
    }
    .use2_list{
        flex: 1;
        display: flex;
        flex-direction: row;
    }
    .use2_item{
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: .24rem .22rem;
        font-size: .16rem;
    }
    .use2_item div{
        flex: 1;
        
    }
    .use2_item>div span{
        display: inline-block;
        width: .16rem;
        height: .16rem;
        background: #ff8b38;
        border-radius: 50%;
    }
    .use2_item>div:nth-child(2){
        color: #8e8e8e;
        font-size: .14rem;
        margin-top: .15rem;
    }

    /* 客服热线 */
    .customer{
        text-align: center;
        padding: 0.1rem 0;
        font-size: .14rem;
    }


    /* 遮罩层 */
    .mask{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        background:rgba(0, 0, 0, .3);
    }
    .mask .loginto{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 3;
        background: #fff;
        display: flex;
    }
    .mask .loginto .btn{
        flex: 1;
        margin: .22rem .31rem;
        border: 0;
        opacity: 1;
        outline: none;
        background: #ff8b38;
        font-size: .15rem;
        color: #fff;
        padding: .15rem;
        border-radius: .22rem;
    }
</style>
